<!-- 饼图 -->
<template>
    <div class="banxin">
         <div id="bingtu" style="width:400px; height:400px;" ref="myEchart"></div>
    </div>
</template>

<script> 
    export default {
        data () { 
            return {
                
            }
        },
        mounted() {
            this.initChart();
        },
        methods: {
            initChart() {
              //基于准备好的dom，初始化echarts实例
              var bingtu = this.$echarts.init(document.getElementById('bingtu'));
              bingtu.setOption({
              //设置饼型图颜色
              backgroundColor: '#4bc28c',
              series : [
                  {
                      //饼型图也可以通过  roseType: 'angle'设置成南格丁尔图
                      //roseType: 'angle',
                      name: '访问来源',
                      type: 'pie',
                      radius: '55%',
                      data:[
                          {value:235, name:'视频广告'},
                          {value:274, name:'联盟广告'},
                          {value:310, name:'邮件营销'},
                          {value:335, name:'直接访问'},
                          //自定义每个扇面的颜色
                          {
                            value:335, name:'直接访问',
                            itemStyle:{
                            color:'green'
                            }
                          } 
                      ],
                      label: {
                          normal: {
                              textStyle: {
                                  color: 'rgba(255, 255, 255, 1)'
                              }
                          }
                      },
                      //表格中文字与饼图线的颜色
                      labelLine: {
                          normal: {
                              lineStyle: {
                                  color: 'rgba(255, 255, 255, 1)'
                              }
                          }
                      }
                  }
                ]
              })
            }
        }
    }
</script>
<style type="text/css">
   #bingtu{
      float: right;
   }
</style>